<!--  -->
<template>
  <div
    id="favebutton"
    :class="[status ? 'favetrue' : 'favefalse']"
    @click="changeStatus"
  ></div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    status: {
      type: Boolean,
      default: false,
      required: true,
    },
  },

  components: {},

  computed: {},

  methods: {
    changeStatus() {},
  },
};
</script>
<style>
#favebutton {
  position: relative;
  height: 50px;
  width: 50px;
  cursor: pointer;
}
.favetrue {
  background: url("../../../public/static/images/heart.png") no-repeat;
  background-size: cover;
  background-position: right;
  transition: background 1s steps(28);
}
.favefalse {
  background: url("../../../public/static/images/heart.png") no-repeat;
  background-size: cover;
  background-position: left;
}
.favefalse:hover {
  animation: hoverani 1s ease infinite;
}
@keyframes hoverani {
  0%,
  100% {
    transform: scale(1);
    transform-origin: center;
  }
  50% {
    transform: scale(1.1);
    transform-origin: center;
  }
}
</style>